<template>
	<view class="shade flex" @tap="maskTap" :class="show ? 'show' : ''" :style="{ '--fss': app.theme.fss() }" @touchmove.stop.prevent>
		<view class="alert flex" :class="show ? 'show' : ''" @tap.stop v-if="info">
			<view class="name">{{ info.title }}</view>
			<view class="desc">{{ info.content }}</view>
			<view class="inputView" v-if="info.placeholder">
				<input 
					class="inputTag"
					type="text"
					:adjust-position="false"
					:placeholder="info.placeholder"
					:maxlength="info.maxLength"
					v-model="info.defaultValue"
					:focus="info.focus" 
					auto-blur
				/>
			</view>
			<view class="btn flex">
				<view class="item" @tap="btnTap(false)" v-if="info.cancel">{{ info.cancelText }}</view>
				<view class="item" @tap="btnTap(true)">{{ info.confirmText }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject, defineExpose } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 基本数据
	const info = ref(null);

	
	/* 方法区域 */
	// 打开弹窗
	function open(e) {
		let res = e || {};
		res.title = e.title || "温馨提示";
		res.content = e.content || "请传入弹窗主要内容";
		res.placeholder = e.placeholder;
		res.defaultValue = e.defaultValue;
		res.maxLength = e.maxLength || 100;
		res.focus = e.focus || false;
		res.cancel = e.cancel === undefined ? true : e.cancel;
		res.cancelText = e.cancelText || "取消";
		res.confirmText = e.confirmText || "确认";
		res.shadeClose = e.shadeClose === undefined ? true : e.shadeClose;
		
		info.value = res;
		show.value = true;
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	
	// 按钮的点击
	function btnTap(type){
		let res = { confirm: type };
		if(info.value.placeholder){
			res.value = info.value.defaultValue
		}
		info.value.success(res);
		close();
	}
	
	// 点击蒙层
	function maskTap(e) {
		if(info.value.shadeClose){
			show.value = false;
		}
	}
	
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.shade {
		background: rgba(0,0,0,0.6);
		.alert{
			background: #FFF;
			padding: 55rpx 43rpx 40rpx 43rpx;
			border-radius: 10rpx;
			flex-direction: column;
			width: 96%;
			visibility: hidden;
			transition: 0.2s all;
			transform: scale(0);
			&.show {
				visibility: visible;
				transform: scale(1);
				animation: fadeInAndScale .2s cubic-bezier(.25,.1,.25,1.3);
				@keyframes fadeInAndScale {
					0% {
					    transform: scale(0);
					}
					70% {
					    transform: scale(1.1);
					}
					100% {
					    transform: scale(1);
					}
				}
			}
			.name{
				font-size: calc(32rpx * var(--fss));
				font-weight: bold;
				line-height: 1.5;
			}
			.desc{
				font-size: calc(30rpx * var(--fss));
				line-height: 1.6;
				margin-top: 23rpx;
				color: #666;
			}
			.inputView{
				margin-top: 28rpx;
				.inputTag{
					background: #F6F6F6;
					font-size: calc(29rpx * var(--fss));
					line-height: 52rpx;
					padding: 20rpx 30rpx;
					height: 92rpx;
					border-radius: 10rpx;
				}
			}
			.btn{
				margin-top: 30rpx;
				margin-right: -20rpx;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				.item{
					font-size: calc(29rpx * var(--fss));
					line-height: 2.2;
					padding: 0 20rpx;
					color: #666;
					border-radius: 10rpx;
					transition: 0.2s all;
					margin-left: 10rpx;
					&:nth-last-child(1){
						font-weight: bold;
						color: #000;
					}
					&:active{
						background: #F9F9F9;
					}
				}
			}
		}
	}
</style>